<template>
    <div class="box">
        <div class="qr-img"></div>
        <span class="qr-code" @click="changeCom"></span>
    </div>
</template>
<script>
    export default {
        methods:{
            changeCom(){
                this.$parent.changeComponent = true
            }
        }
    }
</script>
<style lang="less" scoped>
@import '@/style/common.less';
    .box {
        position: absolute;
       width: 20rem;
       height: 15rem;
       background-color: #fff;
       left: calc(50% - 10rem);
       top: 50%;
       transform: translateY(-50%);
       border-radius: .5rem;
       padding: .5rem 2rem;
       > .qr-img {
            position: absolute;
            left: calc(50% - 6rem);
            top: 50%;
            transform: translateY(-50%);
            width: 12rem;
            height: 12rem;
            border: 1px dotted  @gc05;
       }
       > .qr-code {
                display: inline-block;
                width: 2rem;
                height: 2rem;
                position: absolute;
                top: -20px;
                right: -15px;
                background: url('@/images/passwordlogin.png') center center / 80% no-repeat;
                padding: 0;
            }
    }
</style>